<template>
  <div class="weatherContent">
    <x-header
      :left-options="{backText: ''}"
      @on-click-back="this.$router.go(-1);"
      v-show="isIOS"
    >天气信息</x-header>
    <div id="iframe-box" style="height:100%" v-if="!isIOS">
        <iframe
        id="ifram"
        ref="iframe"
        scrolling="auto"
        frameborder="0"
        :src="url"></iframe>
    </div>
    <div style="overflow:auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;" v-else>
        <iframe ref="iframe" frameborder="0" height="100%" scrolling='no' style="width:1px; min-width:100%; *width:100%;" :src="url" ></iframe>
    </div>
  </div>
</template>

<script>
export default {
  name: "weather",
  methods: {},
  data() {
    return {
      isIOS: this.judgeDeviceType().isIOS,
      url: "https://widget-page.heweather.net/h5/index.html?bg=1&md=0123456&lc=auto&key=00314e0d52c444d9a24710ebd9ce1685"
    };
  },
  mounted() {
  }
};
</script>

<style scoped>
.weatherContent{
    height:100%;
    /* -webkit-overflow-scrolling:touch;  -webkit-fill-available;*/
}
iframe {
  position: absolute;
  top: 10;
  left: 0;
  min-width: 100%;
  *width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
}
.weather{
    width:100%;
    height:100%;
}
</style>